<template>
  <div class="box" style="background-color: white">
     <!--<index-chart v-if="indexStyle==1"></index-chart>-->
     <!--<index-bdc v-if="indexStyle==2"></index-bdc>-->
     <!--<index-task v-if="indexStyle==3"></index-task>-->
     <!--<div style="width: 100%;text-align: right;margin-top: 20px">-->
      <!--请选择首页样式：-->
      <!--<a-radio-group v-model="indexStyle">-->
        <!--<a-radio :value="1">统计图表</a-radio>-->
        <!--<a-radio :value="2">统计图表2</a-radio>-->
        <!--<a-radio :value="3">任务表格</a-radio>-->
      <!--</a-radio-group>-->
    <!--</div>-->
    <me-chart></me-chart>
    <!--<div id="myChart" :style="{width:'600px',height:'300px'}"></div>-->
    <div id="myChart" class="header2"></div>
    <div id="myLine" class="header3"></div>
  </div>
</template>
<script>
  import IndexChart from './IndexChart'
  import IndexTask from "./IndexTask"
  import IndexBdc from './IndexBdc'
  import meChart from './meChart'
  require('echarts/theme/macarons')

  export default {
    name: "Analysis",
    components: {
      IndexChart,
      IndexTask,
      IndexBdc,
      meChart
    },
    data() {
      return {
        indexStyle:1,
        myChart:null,
        myLine:null
      }
    },
    created() {
    },
    mounted(){
      this.$nextTick(() => {
        this.EchartWidth = document.body.clientWidth
        this.Echartheight = this.EchartWidth / 2
        setTimeout(() => {
          this.initChart()
        }, 10);
        this.myChart.resize()
        this.myLine.resize()
      })
      window.onresize = async () => {
        this.EchartWidth =  document.body.clientWidth
        this.Echartheight = this.EchartWidth / 2
        setTimeout(() => {
          this.myChart.resize()
          this.myLine.resize()
        }, 100);
        console.log('onresize', this.EchartWidth,this.Echartheight)
      }
    },
    methods: {
      initChart(){
        this.myChart = this.$echarts.init(document.getElementById('myChart'), 'macarons')
        this.myLine = this.$echarts.init(document.getElementById('myLine'), 'macarons')
        this.myChart.showLoading({
          text: 'loading',
          color: '#4cbbff',
          textColor: '#4cbbff',
          maskColor: 'rgba(0, 0, 0, 0.9',
        })
        this.myLine.showLoading({
          text: 'loading',
          color: '#4cbbff',
          textColor: '#4cbbff',
          maskColor: 'rgba(0, 0, 0, 0.9',
        })
        this.myChart.setOption({
          title: {
            text: '井数统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          dataZoom: [
            {
              id: 'dataZoomX',
              type: 'inside',
              xAxisIndex: [0],
              filterMode: 'filter'
            },
            {
              id: 'dataZoomY',
              type: 'inside',
              yAxisIndex: [0],
              filterMode: 'empty'
            }
          ],
          legend: {
            data: ['泡排井']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: ['长宁页岩气', '川中油气矿', '蜀南气矿', '川西北气矿', '重庆气矿', '四川页岩气']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '泡排井',
              data: [12, 20, 30, 24, 32, 24, 30],
              type: 'bar',
            }
            ]
        });
        this.myLine.setOption({
          title: {
            text: '工艺维护产量'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['产气量','产水量']
          },
          dataZoom: [
            {
              id: 'dataZoomX',
              type: 'inside',
              xAxisIndex: [0],
              filterMode: 'filter'
            },
            {
              id: 'dataZoomY',
              type: 'inside',
              yAxisIndex: [0],
              filterMode: 'empty'
            }
          ],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2021-12-01', '2021-12-02', '2021-12-03', '2021-12-04', '2021-12-05', '2021-12-06','2021-12-07','2021-12-08','2021-12-09','2021-12-10','2021-12-11','2021-12-12']
          },
          yAxis: [
            {
              type: 'value',
              name: '产气量(10⁴m³/d)',
              nameLocation: "middle",
              nameTextStyle: {
                lineHeight: 60,
                fontSize: 15
              }
            },
            {
              type: 'value',
              name: '产水量(m³/d)',
              nameLocation: "middle",
              nameTextStyle: {
                lineHeight: 60,
                fontSize: 15
              }
            }
          ],
          series: [
            {
              name: '产气量',
              data: [300, 310, 320, 330, 340, 355,360,363,328,333,365,345],
              type: 'line',
            },
            {
              name: '产水量',
              data: [600, 610, 620, 630, 640, 655, 660,623,668,663,635,645],
              type: 'line',
              yAxisIndex: 1,
            }
            ]
        });
        this.myChart.hideLoading()
        this.myLine.hideLoading()
      }
    }
  }
</script>

<style scoped>
  /deep/.ant-layout-content{
    background-color: white;
  }
  /deep/.box{
    background-color: white;
  }

  .header2{
    height: 300px;
    padding: 10px;
    position: relative;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(18, 31, 62, 0.3);
  }
  .header3{
    height: 300px;
    padding: 10px;
    position: relative;
    margin-top: 30px;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(18, 31, 62, 0.3);
  }
</style>